<template>
  <div class="flex-column left-container">
    <div class="flex-column-center menu-container">
      <div class="flex-column-center menu-item-group">
        <span class="menu-title">订单管理</span>
        <span :class="{ active: data.selectMenuCode == 'order'}" class="theme-hover menu-item"
              @click="selectMenuHandle('order')">我的订单</span>
      </div>
      <div class="flex-column-center menu-item-group">
        <span class="menu-title">资料管理</span>
        <span :class="{ active: data.selectMenuCode == 'info'}" class="theme-hover menu-item"
              @click="selectMenuHandle('info')">个人资料</span>
        <span :class="{ active: data.selectMenuCode == 'account'}" class="theme-hover menu-item"
              @click="selectMenuHandle('account')">修改密码</span>
      </div>
    </div>
    <div class="flex-column-center server-container" >
      <div class="flex-column-center" style="padding: 14px 10px;">
        <span class="server-title">企业微信</span>
        <span class="color-theme">{{ data.intentionalExam }}</span>
        <div class="image-container">
          <img :src="store.state.customerImg" style="width: 100%;height: 100%" alt="">
        </div>
        <span class="font-mini">手机微信扫码即可添加</span>
        <!--        <span class="font-mini">-->
        <!--          <span class="color-theme">{{data.addAmount}}</span>-->
        <!--          <span>人已添加</span>-->
        <!--        </span>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {configIndex} from '../../../api/course.js'
import {useStore} from 'vuex';

const store = useStore();
const router = useRouter();
const route = useRoute();
watch(route, (val) => {
  data.selectMenuCode = val.query.typeCode
  emits('afterSelectMenuHandle', val.query.typeCode)
})
const emits = defineEmits(['afterSelectMenuHandle']) // 语法糖
const props = defineProps({});
const data = reactive({
  selectMenuCode: 'order',
  isSelectedMenu: false,
  intentionalExamId: '',
  intentionalExam: '',
  qrUrl: '',
});
const initData = () => {
  data.intentionalExamId = localStorage.getItem('intentionalExamId')
  data.intentionalExam = localStorage.getItem('intentionalExam')
  getServerQrUrl()

}

function selectMenuHandle(code) {
  data.selectMenuCode = code
  emits('afterSelectMenuHandle', code)
}

function getServerQrUrl() {
  let requestData = {
    courseType: data.intentionalExamId,
    addSource: 438,
    userId: localStorage.getItem("id"),
  }
  configIndex(requestData, (res) => {
    data.qrUrl = res.data.qyQrcode
  })
}

onMounted(() => {
  data.selectMenuCode = route.query.typeCode || 'order'
  initData()
})

</script>

<style scoped>
.menu-container {
  padding: 20px 0;
  width: 148px;
  height: auto;
  background-color: white
}

.menu-item-group {
  padding-top: 20px;
  font-size: 14px;
  color: #444444;
  line-height: 30px
}

.menu-title {
  font-size: 16px;
  color: #444444;
  font-weight: 700;
  line-height: 40px
}

.menu-item.active {
  display: inline-block;
  width: 148px;
  background: rgba(4, 173, 219, 0.09);
  color: #04addb;
  border-left: 5px solid #04ADDB;
  box-sizing: border-box;
  text-align: center;
}

.server-container {
  margin-top: 20px;
  width: 148px;
  background-color: white;
  font-size: 14px;
  color: #444444
}

.server-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 30px
}

.image-container {
  width: 102px;
  height: 102px;
  margin: 6px 0;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #d7d7d7
}
</style>
